<template>
	<div class="content" >
		<div style="width: 500px;background: white;border-radius: 10px;margin:200px auto;">
			<div 
				class="header-login"
				style="">
			<i class="fa fa-twitch" style="line-height: 100px;font-size: 40px;"></i>
			慧学南通
			</div>
			<div style="padding: 40px;">
					<el-form ref="form" :model="form" label-width="100px">
						<el-form-item 
					  	label="账号：" 
					  	style="border: 0;"
					  	prop="username"
					  	:rules="[
					      { required: true, message: '账号不能为空',trigger: 'blur'},
					      { message: '账号必须不为空',trigger: 'blur'}
					    ]">
					    <!--<i class="fa fa-user-circle-o"></i>-->
					    <el-input v-model="form.username" placeholder="请输入账号"></el-input>
					 </el-form-item>
					 <el-form-item 
					  	label="密码：" 
					  	style="border: 0;"
					  	prop="password"
					  	:rules="[
					      { required: true, message: '密码不能为空',trigger: 'blur'},
					      { min: 6, max: 6,message: '请输入正确的6位密码',trigger: 'blur'}
					    ]">
					    <!--<i class="fa fa-user-circle-o"></i>-->
					    <el-input v-model="form.password" 
					    	placeholder="请输入密码" 
					    	maxlength="6" 
					    	minlength="6" 
					    	show-password></el-input>
					 </el-form-item>
			  </el-form> 	
			<div class="columns" style="background: white;">
			  <div class="column" style="background: white;">
			    <p class="control notification" style="text-align: center;background: white;">			    	
				<el-button 
					class="button is-success is-large btn"
					:loading="loading"
					@click="loginClick">
			  		  登录
			   </el-button>    	
			    </p>
			  </div>
			</div>
						
			</div>
		
		</div>
	</div>
</template>

<script>
import { mapGetters, mapState, mapActions,mapMutations } from 'vuex'
import {login} from '@/service/login.js'
  export default {
    data() {   	
      return {   	
     	form:{
     		username:'',
     		password:''
     	},
     	user:[],
     	loading:false,
      };
    },
    methods: {
    	...mapMutations('user', ['changeLogin']),
    	loginClick(){
    		const that = this
	      this.$refs.form.validate(valid => {
	        if (valid && !this.loading) {
	          this.loading = true
	          login(that.form).then(res =>{
					if(res.data.code === 0){
						that.loading = false
						that.changeLogin(true)
				        that.$notify({
				          title: '成功提示',
				          message: '登录成功',
				          type: 'success'
				        });
//				        that.$router.push('/index')
						//做页面返回处理
						localStorage.setItem('userdata', JSON.stringify(res.data.data))
						let redirect = decodeURIComponent(this.$route.query.redirect || '/index')
						console.log(redirect)
						that.$router.push(redirect)
					}else{
						that.loading = false
						that.$message.error(res.msg);
					}
	          })
	          .catch(res => {
	          	that.loading = false
           		that.$message.error(res);
          	});
	        } else {
	          return false
	        }
	      })
			} 
     }
  }
</script>

<style scoped>
  .bg{
		background-position: center;
  }
  .content{
  	position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #232332;
  }
  .header-login{
  	height: 100px;background: #409EFF;border-radius: 10 0;color: white;font-size: 30px;text-align: center;line-height: 100px;
  }
  .is-success{
  	border: 1px solid #409EFF;
  }
  .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
     border: 0px solid #409EFF; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
  .btn{
  	background-color: #409EFF;
  }
	body{
		overflow: hidden;
	}
</style>
